<!DOCTYPE html >
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>相册展示-个人博客</title>
    <meta name="keywords" content="个人博客"/>
    <meta name="description" content=""/>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/web/css/index.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/web/css/style.css"/>
    <link href="<%=request.getContextPath() %>/resources/css/base.css" rel="stylesheet">
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/web/js/jquery1.42.min.js"></script>
    <script type="text/javascript"
            src="<%=request.getContextPath() %>/resources/web/js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/web/js/com.ebase.com.ebase.common.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/web/js/waterfall.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.masonry.min.js"></script>
    <!--[if lt IE 9]>
    <script src="<%=request.getContextPath() %>/resources/web/js/html5.js"></script>
    <![endif]-->
    <style type="text/css">
        .container-fluid {
            padding: 20px;
        }

        .box {
            margin-bottom: 20px;
            float: left;
            width: 200px;
        }

        .box img {
            max-width: 100%
        }
    </style>
</head>

<body>
<!--header start-->
<%--<div id="header">--%>
    <%--<h1>个人博客</h1>--%>

    <%--<p>青春是打开了,就合不上的书。人生是踏上了，就回不了头的路，爱情是扔出了，就收不回的赌注。</p>--%>

    <%--<div id="nav">--%>
        <%--<jsp:include page="../../../resources/pages/nav.jsp"></jsp:include>--%>
    <%--</div>--%>
<%--</div>--%>
<header>
    <div id="logo"><a href="/"></a></div>
    <nav class="topnav" id="topnav">
        <c:forEach items="${navChannels}" var="nav">
            <a href="${nav.customLinkUrl}"><span>${nav.name}</span><span class="en">${nav.pinyinStr}</span></a>
        </c:forEach>
    </nav>
</header>
<!--header end-->
<!--content start-->
<div id="content_xc">
    <div class="weizi">
        <div class="wz_text">当前位置：<a href="#">首页</a>><h1>相册展示</h1></div>
    </div>
    <div class="xc_content">
        <div class="con-bg">
            <div class="w960 mt_10">
                <div class="w650">
                    <div id="masonry" class="container-fluid" style="display:none">
                        <%--<div class="box "><img width="200" rel="lazy"--%>
                                               <%--lazy_src="<%=request.getContextPath() %>/resources/web/images/photo/8.jpg">--%>
                        <%--</div>--%>
                        <c:forEach items="${datas.datas}" var="item">
                            <div class="box "><img width="200" rel="lazy"
                                                   lazy_src="${item.attachFileName}">

                            </div>
                        </c:forEach>
                    </div>
                    <hr/>
                    <ul class="tips" id="wf-main" style="display:none">
                        <%--<c:forEach items="${attachList}" var="item">--%>
                        <%--<li class=""><img src="<%=request.getContextPath()%>/resources/upload/thumbnail/${item.newName}"  width="200" height="178" alt="" /></li>--%>
                        <%--</c:forEach>--%>
                    </ul>
                </div>
                <div class="blank"></div>
                <div class="ad">
                    <img src="images/ad.png">
                </div>
                <div class="page position-relative">
                    <jsp:include page="/resources/pages/index_pager.jsp">
                        <jsp:param value="${datas.total }" name="totalRecord"/>
                        <jsp:param value="/blog/tpl/web/xc" name="url"/>
                    </jsp:include>
                </div>
            </div>
        </div>
    </div>
</div>
<!--content end-->
<!--footer-->
<jsp:include page="footer.jsp"/>
<!--footer end-->
<script type="text/javascript">jQuery(".lanmubox").slide({easing: "easeOutBounce", delayTime: 400});</script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/web/js/nav.js"></script>
<script>

    var timer, m = 0, m1 = $("img[rel='lazy']").length;

    function fade() {

        $("img[rel='lazy']").each(function () {

            var $scroTop = $(this).offset();

            if ($scroTop.top <= $(window).scrollTop() + $(window).height()) {

                $(this).hide();

                $(this).attr("src", $(this).attr("lazy_src"));

                $(this).attr("top", $scroTop.top);

                $(this).removeAttr("rel");

                $(this).removeAttr("lazy_src");

                $(this).fadeIn(600);

                var _left = $(this).parent().parent().attr("_left");

                if (_left != undefined)

                    $(this).parent().parent().animate({left: _left}, 400);

                m++;

            }

        });

        if (m < m1) {
            timer = window.setTimeout(fade, 300);
        }

        else {
            window.clearTimeout(timer);
        }

    }

    $(function () {
        var $container = $('#masonry');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.box',
                gutterWidth: 20,
                isAnimated: true,
                columnWidth: 200
            });
        });

        $("#masonry img[rel='lazy']").each(function (i) {

            var _left = $(this).parent().parent().css("left").replace("px", "");

            $(this).parent().parent().attr("_left", _left);

            $(this).parent().parent().css("left", 0);

        });

        fade();

    });

    $("#masonry").show();

</script>
</body>
</html>